<template>
  <div class="cmt-container">
    <h3>发表评论</h3>
    <hr>

    <textarea placeholder="请输入要BB的内容(最多吐槽120字)" maxlength="120" v-model="msg"></textarea>

    <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

    <div class="cmt-list">
     <div class="cmt-item" v-for="(item, index) in comment" :key="index">
        <div class="cmt-title">
        第{{index+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp；发表时间：{{item.add_time |dateFormat}}
        </div>
        <div class="cmt-body">
        {{item.content==='undefined'?'此用户很懒，不想吐槽...':item.content}}
        </div>
    </div>
    </div>

    <mt-button type="danger" size="large" plain @click="more">加载更多</mt-button>
  </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    export default{
        data(){
            return{
                pageindex:1,//默认第一页数据
                comment:[],//所有的评论数据
                msg:'', //评论输入的内容
            }
        },
        created() {
            this.getComment();
        },
        methods:{
            getComment(){
                this.$http.get('api/getcomments/'+this.id+'?pageindex='+this.pageindex).then(result=>{
                    if(result.body.status===0){
                        // this.comment=result.body.message;
                        // 每当获取新评论数据时，不要把老数据清空覆盖，而是应该以老数据，拼接新的数据
                        this.comment=this.comment.concat(result.body.message)
                    }else{
                        Toast('加载评论失败...')
                    }
                })
            },
            more(){
                this.pageindex++;
                this.getComment();
        },
        postComment(){
            // 校验是否为空内容
            if(this.msg.trim().length===0)
            {
                return Toast("评论内容不能为空！")
            }
            //发表评论
            // 参数1.请求的URL地址
            // 参数2.提交给服务器的数据对象{content:this.msg}
            // 参数3.定义提交时表单中数据的格式（emulateJSON：true）
            // this.id可为this.$route.params.id
            this.$http.post('api/postcomment/'+this.id,{content:this.msg.trim()}).then(result=>{
                if(result.body.status===0)
                {
                    //1.手动拼接一个评论对象
                    //2.放到数组最上面
                    var cmt={user_name:'匿名用户',add_time:Date.now(),content:this.msg.trim()};
                    this.comment.unshift(cmt);
                    this.msg='';
                }
            })
        }
    },
     props:["id"],
    }
</script>

<style lang="scss" scoped>
    .cmt-container{
        h3{
            font-size:18px;
        }
        textarea{
            font-size:14px;
            height:85px;
            margin:0;
        }
        .cmt-list{
            .cmt-item{
                font-size:13px;
                margin:5px 0;
                .cmt-title{
                    background-color:#ccc;
                    line-height:35px;
                }
                .cmt-body{
                    line-height:35px;
                    text-indent:2em;
                }
            }
        }
    }

</style>
